<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
    <script type="text/javascript" src="../../js/jquery-2.1.0.min.js"></script>
</head>

<body>
<h2 id="error" th:text="${error}"></h2>
<div align="center">
    <button onclick="mima()">账号密码登陆</button>
    <button onclick="shouji()">手机验证登陆</button>
    <button onclick="renlian()" id="face">人脸识别登陆</button>
</div>

<div align="center" id="mima">
    <form method="post" action="/login/userLogin1">
        <table>
            <div>
                <tr>
                    <td>账户：</td>
                    <td><input type="text" class="userName" id="userName" name="userName"></td>
                </tr>
            </div>
            <div>
                <tr>
                    <td>密码：</td>
                    <td><input type="password" class="passWord" id="passWord" name="passWord"></td>
                </tr>
            </div>
        </table>
        <div id="div2">
            <button type="submit" value="登陆">登陆</button>
            <button type="button" value="注册" onclick="registerUser()">注册</button>
        </div>
    </form>
</div>
<div align="center" style="display: none" id="shouji">
    <form method="post" action="/login/userLogin2">
        <table>
            <div>
                <tr>
                    <td>电话号码：</td>
                    <td><input type="text" class="tel" id="tel" name="tel"></td>
                </tr>
            </div>
            <div>
                <tr>
                    <td>验证码：</td>
                    <td><input type="text" id="verify" name="verify" placeholder="手机验证码"></td>
                    <td>
                        <a class="btn btn-danger" id="moBtn" onclick="sendVerify()" href="javascript:;">获取手机验证码</a>
                        <a href="javascript:;" id="secondShow"></a>
                    </td>
                </tr>
            </div>
        </table>
        <div>
            <button type="submit" value="登陆">登陆</button>
            <button type="button" value="注册" onclick="registerUser()">注册</button>
        </div>
    </form>
</div>

<!--人脸识别-->
<div align="center" style="display: none" id="renlian">
    <video id="video" width="480" height="320" controls>
    </video>
    <form method="post" action="/login/userLogin3">

        <div>
            <button id="capture" >拍照</button>
            <img id="photo" alt="photo"  style="width: 375px;height: 100%;">
            <input type="text" id="base64" style="display: none" name="base64Data" >
        </div>
        <canvas id="canvas" width="480" height="320"></canvas>
       <!-- <canvas id="canvas" width="480" height="320"></canvas>-->
    </form>

</div>
<script>
    function renlian() {
        $("#shouji").hide();
        $("#mima").hide();
        $("#renlian").show();
        $("#error").hide();
    }

    function mima() {
        $("#shouji").hide();
        $("#renlian").hide();
        $("#mima").show();
        $("#error").hide();
    }

    function shouji() {
        $("#mima").hide();
        $("#renlian").hide();
        $("#shouji").show();
        $("#error").hide();
    }

    var countdown = 60;

    function sendVerify() {
        $("#secondShow").css('display', 'block');
        $("#moBtn").css('display', 'none');
        $("#secondShow").html('重新发送(' + countdown + 's)');
        var timer = setInterval(function () {
            if (countdown == 0) {
                clearInterval(timer);
                $("#secondShow").css('display', 'none');
                $("#moBtn").css('display', 'block');
                countdown = 60;
                console.log(countdown);
            }
            $("#secondShow").html('重新发送(' + (countdown - 1) + 's)');
            countdown--;
        }, 1000);
        var tel = $("#tel").val();
        $.ajax({
            url: "/login/sendVerify",
            type: "POST",
            dataType: "json",
            data: {"tel": tel},
            success: function (data) {
                console.log(data);
                alert(data.message);
            },
            error: function () {
                alert("服务器出错!");
            },
        });
    }
    function registerUser() {
        window.location.href = "../login/register";
    }
    //访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
            //最新的标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        } else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints, success, error)
        } else if (navigator.mozGetUserMedia) {
            //firfox浏览器
            navigator.mozGetUserMedia(constraints, success, error);
        } else if (navigator.getUserMedia) {
            //旧版API
            navigator.getUserMedia(constraints, success, error);
        }
    }

    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let context = canvas.getContext('2d');

    function success(stream) {
        //兼容webkit核心浏览器
        let CompatibleURL = window.URL || window.webkitURL;
        //将视频流设置为video元素的源
        console.log(stream);

        //video.src = CompatibleURL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    }

    function error(error) {
        console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    }

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
        //调用用户媒体设备, 访问摄像头
        getUserMedia({
            video: {
                width: 480,
                height: 320
            }
        }, success, error);
    } else {
        alert('不支持访问用户媒体');
    }

    document.getElementById('capture').addEventListener('click', function () {
        //context.drawImage(video, 0, 0, 480, 320);
        //let imgData = canvas.toDataURL('image/webp');
        let canvas = document.getElementById('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
        let imgData = canvas.toDataURL('image/webp');
        document.getElementById('photo').setAttribute('src', imgData);
        let base64Data = imgData.substr(23);
        console.log("base64Data--->")
        console.log(base64Data);
        document.getElementById('base64').value = base64Data; //赋值

    })



</script>
</body>
</html>